<template>
  <div>
    <div class="carousel" @mouseenter="pauseAutoPlay" @mouseleave="startAutoPlay">
      <div class="carousel-wrapper">
        <div
            v-for="(slide, index) in slides"
            :key="index"
            class="carousel-slide"
            :class="{
            active: index === activeIndex,
            prev: index === (activeIndex - 1 + slides.length) % slides.length,
            next: index === (activeIndex + 1) % slides.length
          }"
        >
          <img :src="slide" alt="Slide image" />
        </div>
      </div>
      <div class="carousel-dots">
        <span
            v-for="(slide, index) in slides"
            :key="index"
            :class="{ active: index === activeIndex }"
            @click="goToSlide(index)"
        ></span>
      </div>
      <button @click="prevSlide" class="prev-button">❮</button>
      <button @click="nextSlide" class="next-button">❯</button>
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold;font-size: 16px;"> 新闻 公告</span>
      </div>
      <div>
<el-carousel :interval="4000" type="card" height="200px">
  <el-carousel-item v-for="(item, index) in newsList" :key="index">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <router-link :to="{ name: 'NewsDetail', params: { id: item.id }}">
          <span style="font-weight: bold;font-size: 16px;">{{ item.newsTitle }}</span>
        </router-link>
      </div>
      <div>
        <el-image
            style="width: 60%; height: 50%"
            :src="item.imagUrl"
        />
      </div>
    </el-card>
  </el-carousel-item>
</el-carousel>

      </div>
    </el-card>
    <el-card class="box-card-EChart">
      <RevenueHome />
    </el-card>
  </div>


</template>

<script>
import RevenueHome from "@/views/statistics/RevenueHome.vue";
import notice from "@/views/system/NoticeHome.vue";

export default {
  computed: {
    notice() {
      return notice
    }
  },
  components: {
    RevenueHome
  },

  data() {
    return {
      activeIndex: 0,
      // 轮播 banner 的路径数组
      slides: [],
      autoPlayInterval: null,
      //   新闻集合
      newsList:[],
      // 通知集合
      noticeList:[],

    };
  },
  mounted() {
    this.loadBanner()
    this.startAutoPlay();
  },
  beforeDestroy() {
    this.pauseAutoPlay();
  },
  created() {
    this.loadNews()
    this.loadNotice()
  },
  methods: {
    // 加载新闻
    loadNews(){
      this.$http.get("/system/news/listAllNews").then(resp=>{
        console.log(resp.data.data);
        this.newsList =resp.data.data;
      })
    },

    // 加载通告
    loadNotice(){
      this.$http.get("/system/notice/listAllNotice").then(resp=>{
        console.log(resp.data.data);
        this.noticeList =resp.data.data;
      })
    },

    // 加载 轮播图片
    loadBanner(){
      this.$http.get("/system/banner/getBanner").then(resp=>{
        this.slides=resp.data.data.map(item=>item.url)
      })
    },
    startAutoPlay() {
      this.autoPlayInterval = setInterval(this.nextSlide, 3000); // 每3秒切换一次
    },
    pauseAutoPlay() {
      clearInterval(this.autoPlayInterval);
      this.autoPlayInterval = null;
    },
    nextSlide() {
      this.activeIndex = (this.activeIndex + 1) % this.slides.length;
    },
    prevSlide() {
      this.activeIndex =
          (this.activeIndex - 1 + this.slides.length) % this.slides.length;
    },
    goToSlide(index) {
      this.activeIndex = index;
    },
  },
};
</script>

<style scoped>
.text {
  font-size: 16px;
}

.item {
  margin: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.clearfix span{
  padding: 3px 10px;
}
.box-card {
  float: left;
  margin: 10px;
  height: 290px;
  width: 400px;
}
.box-card-EChart {
  margin: 10px;
  float: left;
  height: 290px;
  width: 830px;
}

.carousel {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: 70%; /* 中间图片宽度更大 */
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  transform: translateX(-50%) scale(0.85); /* 默认情况下稍微缩小 */
  z-index: 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-slide.active {
  opacity: 1;
  transform: translateX(-50%) scale(1.1); /* 中间图片放大 */
  z-index: 3;
}

.carousel-slide.prev {
  transform: translateX(-130%) scale(0.75); /* 左侧图片更小且向右偏移更多 */
  z-index: 2;
  opacity: 0.6; /* 透明度更低 */
}

.carousel-slide.next {
  transform: translateX(30%) scale(0.75); /* 右侧图片更小且向左偏移更多 */
  z-index: 2;
  opacity: 0.6; /* 透明度更低 */
}

.carousel-dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.carousel-dots span {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.carousel-dots span.active {
  background-color: rgba(255, 255, 255, 1);
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.prev-button {
  left: 10px;
}

.next-button {
  right: 10px;
}

button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
.carousel-caption {
  padding: 0 !important;
}
</style>
